// 立体菜单
class Menu {
  #wrap = null  // 容器
  #wrap_children = [] // 施加特效的子集
  #fragment = document.createDocumentFragment('div')
  #height = 0
  #speed = 0.3 // 动画速度默认0.3秒
  #background = '#000' // 背景颜色
  constructor(wrap = null, params = { speed: 0.3, background: '#000' }) {
    let t = this
    t.#speed = params.speed ? params.speed : t.#speed
    t.#background = params.background ? params.background : t.#background
    t.#wrap = wrap
    t.#wrap_children = Array.from(wrap.children)
    t.#height = t.#wrap_children[0].offsetHeight
    t.#set_wrap_css(t)
    t.#set_children_css(t)
  }

  // 设置容器css
  #set_wrap_css = t => {
    t.#wrap.style.cssText = `
      transform-style: preserve-3d;
    `
  }

  // 设置子集css
  #set_children_css = t => {
    t.#wrap_children.forEach((item, index) => {
      item.style.cssText = `position: relative;transform: rotateX(0deg);transform-style: preserve-3d;transition: all ${ t.#speed }s;`

      let cp_item1 = item.cloneNode(true)
      let cp_item2 = item.cloneNode(true)
      cp_item1.classList.add(`special-effects-clone1-${ index + 1 }`)
      cp_item2.classList.add(`special-effects-clone2-${ index + 1 }`)

      cp_item1.style.cssText = `
      position: absolute;
      left: 0;
      top: 0;
      transform: translateZ(${ t.#height / 2 }px);
      `
      cp_item2.style.cssText = `
      position: absolute;
      left: 0;
      top: ${ t.#height / 2 }px;
      color: #fff;
      background: ${ t.#background };
      transform: rotateX(-90deg);
      `
      item.innerHTML = ''
      item.classList.add(`special-effects-wrap`)

      item.addEventListener('mouseover', () => {
        t.#mousemove(t, index)
      })
      item.addEventListener('mouseleave', () => {
        t.#mouseleave(t, index)
      })

      item.appendChild(cp_item1)
      item.appendChild(cp_item2)
      t.#fragment.appendChild(item)
    })
    t.#wrap.style.cssText = `
    `
    t.#wrap.appendChild(t.#fragment)
  }

  // 鼠标移入
  #mousemove = (t, index) => {
    t.#wrap.children[index].style.transform = 'rotateX(90deg)'
  }

  // 鼠标离开
  #mouseleave = (t, index) => {
    t.#wrap.children[index].style.transform = 'rotateX(0deg)'
  }
}
export default Menu